/**
* 功能描述：分段选择器样式
* @author jin xiaohang
* @date 2022/9/29 15:45
* @version 1.0
*/


@import "src/style/mixins/index";

//定义布局
@mixin segmented-layout{
  box-sizing: border-box;
  margin: 0;
  line-height: 1.5715;
  list-style: none;
  display: inline-block;
  padding: 2px;

  //分段组布局
  .#{$namespace}-segmented-group{
    position: relative;
    display: flex;
    align-items: stretch;
    justify-items: flex-start;
    width: 100%;

    //分段器中得每一项得布局
    .#{$namespace}-segmented-item{
      position: relative;
      text-align: center;

      //分段器中得input得布局
      .#{$namespace}-segmented-item-input{
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        pointer-events: none;
      }

      //分段器中得标签得布局
      .#{$namespace}-segmented-item-label{
        min-height: 28px;
        padding: 0 11px;
        line-height: 28px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

  }
}
//定义样式
@include b(segmented) {
  font-size: 14px;
  color: #000000a6;
  background-color: #0000000a;
  border-radius: 2px;

  //引用布局
  @include segmented-layout;

    //分段器中得每一项得样式
    .#{$namespace}-segmented-item{
      cursor: pointer;

      &:hover{
        color: #262626;
      }
    }

    //激活项得样式
    .#{$namespace}-segmented-selected-item{
      background-color: #fff;
      border-radius: 2px;
      box-shadow: 0 2px 8px -2px #0000000d, 0 1px 4px -1px #00000012, 0 0 1px #00000014;
      color: #262626;
    }
}